<template>
    <div class="knowledge">
        <ol>
          <li><b>Variables 变量</b> - 在一个地方管理常用的值</li>
          <p><span>基础用法 @：</span>@link-color: #428bca; h1 {color: @link-color;}</p>
          <p><span>变量插值 @{ }：</span>@mySelector: banner; .@{mySelector} {font-weight: bold;}</p>
          <p><span>导入语句：</span>@myPath: '../css'; @import '@{myPath}/common.less';</p>
          <p><span>属性变量：</span>@property: font; ...@{property}-size: 14px;</p>
          <p><span>使用变量来定义变量名：</span>@fnord: italic; @var: fnord; ...font-style: @@var;</p>
          <p><span>变量提升 当前作用域中向上搜索：</span>.variables{box-shadow: 2px 2px 2px @up; @up: red;} @up: #ccc;</p>

          <li><b>Extend 扩展</b> - 合并它所在的选择器和它所匹配的引用</li>
          <p>基础用法extend：.extend:extend(.inline); .inline{color: red;}</p>
          <p>扩展语法：.extend:extend(.inline all);//选择相邻的选择器 .a.inline 或 .inline.b 等；.extend:extend(.inline, .c);//扩展多个类；扩展可以使用链式解构，但是注意扩展:extend()必须出现在尾部</p>
          <p>嵌套选择器：.extend:extend(.inline1 tr);//只会匹配.inline1 tr中的样式 属于.inline1但不属于tr的样式不会被匹配！</p>
          <p>扩展中的匹配是精准匹配，必须完全一样才能匹配上，即使两个选择器的意义是一样的：*.class 和 .class 或者 :nth-child(1n+3) 和 :nth-child(n+3) 都是不一样的</p>
          <p>唯一特例：[title=identifier]、[title='identifier']、[title="identifier"]是等价的</p>
          <p>插值变量：不能在扩展表达式中使用变量：@{variable}:extend(.bucket) {}；.bucket:extend(@{variable}) {}; //这两种情况是无效的</p>
          <p>media声明内的extend只匹配同一media声明内的选择器，顶级extend匹配一切</p>
          <p>应用：避免在标签上添加基础类；比mixin产生更少的css代码</p>
          <li><b>Mixins 混合</b> - 将选择器样式混入其他选择器</li>
          <p>基础用法：.a {color: white;}; .mixins { .a; };</p>
          <p>加上括号 该样式集合就不会生成样式 相当于 定义了一个函数集合当作变量使用：.c() {text-shadow: 3px 3px 3px #428bca;}</p>
          <p>在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承 !important：</p>
          <li><b>Parametric Mixins 带参数的混合</b> - 像函数一样使用 参数可设置默认值</li>
          <p>基础用法：.border-color(@color){border-color: @color;} .params-mixins{.border-color(#ca4742);}</p>
          <p>设置默认值：.border-shadow(@color: #42ca8b){box-shadow: 3px 3px 3px @color;} .params-mixins{.border-shadow;}</p>
          <p>多个参数：用；隔开，定义多个具有相同名称和参数数量的mixins时，less会使用它可以应用的属性：.more-params(@color; @size; @weight: bold){font-weight: @weight;} ....more-params(white);//@size没有值无法混合</p>
          <p>不必按照任意特定的顺序来使用参数</p>
          <p>注意@arguments 在mixins内部 表示所以参数 用空格隔开：.text-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {text-shadow: @arguments;} ....text-shadow(3px, 3px);</p>
          <p>注意 ... 语法 和 @rest 参数 表示数量不定的参数：.mixin(@a: 1; ...){} 或者 .mixin(@a; @rest...){}</p>
          <p>模式匹配：@_ 表示接受任何值：.background(dark; @color){ background: darken(@color, 10%);} .background(light; @color){background: lighten(@color, 10%);} @switch: dark; .params-mixins {.background(@switch; purple);} //会匹配dark</p>
          <li><b>Mixins as Functions 作为函数使用的混合</b> - 可以从mixin中返回变量</li>
          <p>变量充当返回值：.func1{@color: pink;} .func-mixins{.func1; color: @color;}</p>
          <p>定义在mixin中的mixin同样可以作为返回值：.func2(@color){.func3{ background: @color;}} .func-mixins{.func2(#c28fdf);.func3;}</p>
          <li><b>Passing Rulesets to Mixins 传递规则集给混合</b> - 允许在mixin中定义包装CSS块</li>
          <p>基本用法：@detached-ruleset: {background: rgb(187, 255, 0);}; .rulesets-mixins{@detached-ruleset();} //@detached-ruleset 就是一个规则集 注意规则集的括号不能省略</p>
          <p>一个规则集合现在可以分配给一个变量或传递给一个mixin，并且可以包含全部的less特性</p>
          <p>规则集可以所有它的mixins，但是不能返回变量（私有变量）！：@detached-ruleset1: {.mixin-to-ruleset() {color:blue;}};  ...@detached-ruleset1(); .mixin-to-ruleset;</p>
          <p>规则集合可以在它被 定义 和被 调用 的地方使用所有变量和混入，即定义和调用的作用域对它都是有效的，如果这两个作用域包含相同的变量或混入，定义的作用域中的值优先</p>
          <p>从一个变量复制分离规则集合到另一个不能修改其作用域，只是在那里被引用</p>
          <p>规则集合在导入时会获得新的作用域：#space {.importer1() {@detached: { font-weight: @variable; };}}//定义了规则集 这么导入：#space > .importer1();</p>
          <li><b>Import Directives 导入准则</b> - 从其他样式表中导入样式</li>
          <p>less 中 @import语句 可以放在任何位置</p>
          <p>文件扩展名：.css - 作为CSS对象，@import语句保持不变；其他 - 作为Less对象；没有扩展名 - 自动添加 less</p>
          <li><b>Import Options 导入选项</b> - 更灵活导入 第三方 css 文件</li>
          <p>@import (keyword) "filename";</p>
          <ul>
              <li>reference：使用Less文件但不添加导入的样式到编译输出中，只引用</li>
              <li>inline：在输出中包含源文件但不加工它</li>
              <li>less：将文件作为Less文件对象，无论是什么文件扩展名</li>
              <li>css：将文件作为CSS文件对象，无论是什么文件扩展名</li>
              <li>once：相同件只会被导入一次（默认行为）</li>
              <li>multiple：允许导入多个同名文件</li>
          </ul>
          <li><b>Mixin Guards</b> - 带条件的 Mixin</li>
          <p>.condition (@a) when (lightness(@a) >= 50%) {background: black;} ....condition(#555)</p>
          <p>比较运算符：>, >=, =, =&lt;, &lt; 关键字true是让两个mixins等价的唯一真值：.truth (@a) when (@a = true) { ... } .truth(40);//不符合，因为40为 false </p>
          <p>逻辑运算符：and, or, not 可以用 , 来模仿 or</p>
          <p>类型检查函数：iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage、isem、isunit</p>
          <p>带条件的mixins：default函数创建类似于else或者default语句：.mixin (@a) when (@a > 0) { ...  } .mixin (@a) when (default()) { ... }//即@a &lt; 0 的条件</p>
          <p>CSS Guards 直接在样式上编写约束，而无须借助混合：.condition-mixins when (@my-option = true) {box-shadow: 3px 3px 3px #42caca;}</p>
          <li><b>Loops 循环</b> - 混合可以调用它自身</li>
          <p>当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构：.generate-columns(@n, @i: 1) when (@i =&lt; @n) {.column-@{i} {width: (@i * 100% / @n);}.generate-columns(@n, (@i + 1));}</p>
          <li><b>Merge 合并</b> - 合并后用逗号+或空格分隔+_</li>
          <p>必须在每个待加入的声明中显示的设置一个+或者+_标记</p>
          <li><b>Parent Selectors 父级选择器</b> - 使用 & 引用父选择器</li>
          <p>.button{&-ok{...}} => .button-ok{}</p>
          <p>.link{& + & {...}} => .link + .link{}</p>
          <p>！！&代表所有的父选择器（而不只是最近的长辈）</p>
          <p>改变选择器顺序：& 放在当前选择器之后 可以在当前选择器后插入父选择器：.a{.b{.c &{}}} => .c .a .b{}</p>
          <p>&还可以生成一个用逗号分割的所有可能的选择器排列，如 p, a, ul, li{& + & {}} 就有16种可能</p>
          <li><b>转义</b> - Css 转义, 用~"值" 符号</li>
        </ol>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
.knowledge{
    text-align: left;
    overflow: scroll;
    height: calc(100% - 70px);
}
</style>